import { useState } from "react";
import { Button, Card, Input, message } from "antd";
import { UserOutlined } from "@ant-design/icons";
import "./Login.css";

function Login({ onLoginStateChange, isLogin }) {
  const { Meta } = Card;
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [messageApi, contextHolder] = message.useMessage();

  const handleClick = () => {
    onLoginStateChange(true);
    messageApi.open({
      type: "error",
      content: "登录成功！",
    });
  };

  return (
    <>
      {contextHolder}
      <div
        className={
          isLogin
            ? "login-box animate__animated animate__fadeOutUpBig"
            : "login-box animate__animated animate__fadeInDownBig"
        }
      >
        <div className="login-box-main" />
        {/* <Card
          // className="animate__animated animate__fadeInLeft"
          hoverable
          style={{
            width: "50%",
          }}
          cover={<img alt="example" src="../../static/images/login.png" />}
        >
          <Meta title="用户登录" style={{ textAlign: "center" }}></Meta>
        </Card> */}

        <Button size="large" type="primary" key="ok" onClick={handleClick}>
          登录
        </Button>
      </div>
    </>
  );
}

export default Login;
